<template>
  <div class="second-wrapper">
    <div class="second-title-wrapper">
      <p class="second-title">秒杀</p>
      <count-down :actStartTime="actStartTime" :duration="duration" />
    </div>
    <div class="second-list">
      <div class="second" v-for="item in seconds" :key="item.id">
        <img :src="item.icon" />
        <p class="price">￥{{item.price | priceValue}}</p>
        <p class="old-price">￥{{item.oldPrice | priceValue}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import CountDown from './CountDown'

export default {
  name: 'Second',
  data: function () {
    return {
      seconds: [],
      actStartTime: '',
      duration: 0
    }
  },
  created: function () {
    this.initData()
  },
  methods: {
    initData: function () {
      this.$http
        .get('/main/second')
        .then(data => {
          console.log(data)
          this.seconds = data.list
          this.actStartTime = data.actStartTime
          this.duration = data.duration
        })
        .catch(err => {
          console.log(err)
        })
    }
  },
  components: {
    CountDown
  }
}
</script>

<style lang="stylus" scoped>
.second-wrapper
  margin:px2rem(10)
  padding:px2rem(10)
  border-radius: px2rem(10)
  background:$color-white
  .second-title-wrapper
    display:flex
    align-items:center
    margin:px2rem(10)
    .second-title
      font-size: px2rem(50)
      margin:px2rem(10)
  .second-list
    display :flex
    overflow-x:scroll
    overflow-y:hidden
    .second
      img
        width: px2rem(200)
        height :px2rem(200)
        margin: px2rem(10)
      .price
        margin: px2rem(5)
        font-size: px2rem(30)
        color : $color-red
      .old-price
        margin: px2rem(5)
        text-decoration : line-through
        font-size: px2rem(30)
</style>
